<template>
    <div>
        <h1>新增页面</h1>
    </div>
    <table>
        <tbody>
            <tr>
                <td>上传图片</td>
                <td>
                    <input type="file" @change="upload">
                    <img :src="axios.defaults.baseURL+data.Img" style="width: 50px;">
                </td>
            </tr>
            <tr>
                <td>账号</td>
                <td>
                    <input type="text" v-model="data.UserName">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" v-model="data.Password">
                </td>
            </tr>
            <tr>
                <td>昵称</td>
                <td>
                    <input type="text" v-model="data.NickName">
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td><input type="text" v-model="data.Phone"></td>
            </tr>
            <tr>
                <td>创建日期</td>
                <td><input type="date" v-model="data.CreateTime"></td>
            </tr>
            <tr>
                <td>角色</td>
                <td>
                    <select v-model="data.rid">
                        <option value="0">请选择角色</option>
                        <option v-for="d in bangdata" :value="d.Rid">{{d.RoleName}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="新增" @click="add"></td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter();
onMounted(() => {
    bang();  
})
const upload=(ev:any)=>{
    let f=ev.target.files[0];
    let fd=new FormData();
    fd.append("file",f);

    if(f.type!='image/png')
    {
        alert('只上传图片');
        return;
    }
    if(f.size>(2*1024*1024))
    {
        alert('图片内存要小于2MB');
        return;
    }


    axios.post("/api/UploadFiles/Upload",fd).then(res=>{
        data.value.Img=res.data;
    })
}
const bangdata=ref({});
const bang=()=>{
    axios.get("/api/Role/GetRoles",{params:bangdata.value}).then(res=>{
        bangdata.value=res.data;
    })
}
const data=ref({
    "Id": 0,
  "UserName": "",
  "NickName": "",
  "Password": "",
  "Phone": "",
  "Img": "string",
  "CreateTime": "",
  "IsDelete": true,
  "rid": 0
})
const add=()=>{
    let a=/^[a-z]{4，16}$/
    if(data.value.Password=="")
    {
        alert('密码不能为空');
        return;
    }
    if(data.value.NickName=="")
    {
        alert('昵称不能为空');
        return;
    }
    let s=/^[\u4e00-\u9fa5]{2,20}$/
    if(!s.test(data.value.NickName))
    {
        alert('管理员姓名需2-20之间的汉字');
        return;
    }
    if(data.value.Phone=="")
    {
        alert('手机号不能为空');
        return;
    }
    let l=/^13\d{9}$/
    if(!l.test(data.value.Phone))
    {
        alert('手机号格式不正确');
        return;
    }
    if(data.value.CreateTime=="")
    {
        alert('创建日期不能为空');
        return;
    }
    if(data.value.rid=="")
    {
        alert('角色不能为空');
        return;
    }
    axios.post("/api/User/AddUser",data.value).then(res=>{
        if(res.data>0)
        {
            alert('新增成功');
            router.push('/');
        }
        else
        {
            alert('新增失败');
            return;
        }
    })
}

</script>

<style scoped>

</style>